<template>
    <div class="partner-list">
        <el-col
            :sm="8"
            :xs="12"
            class="partner-item hvr-float-shadow"
            v-for="item in list"
            :key="item.id"
        >
            <a :href="item.url" target="_blank">
                <div class="images">
                    <img
                        :src="
                            item.image_url ||
                            require('@/assets/images/cover.png')
                        "
                        :onerror="defaultImg"
                    />
                </div>
                <div class="info">
                    <h4>{{ item.title }}</h4>
                    <p>
                        {{ item.desc }}
                    </p>
                </div>
            </a>
        </el-col>
    </div>
</template>

<script>
import image from "@/assets/images/cover.png";

export default {
    name: "partner",
    props: {
        list: {
            type: Array,
        },
    },
    data() {
        return {
            defaultImg: 'this.src="' + image + '"',
        };
    },
};
</script>

<style lang="less" scoped>
.partner-list {
    margin-top: 20px;
    .partner-item {
        padding: 0 10px;
        margin-bottom: 30px;
        position: relative;

        a {
            display: flex;
            align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            border: 1px solid #dedede;
            background: #fff;
            box-shadow: 7px -7px #e8e8e8;
            -webkit-box-shadow: 7px -7px #e8e8e8;
            padding: 8px 20px;

            .images {
                height: 60px;
                width: 60px;
                margin-right: 20px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .info {
                flex: 1;
                height: 100%;
                color: #475558;
                font-size: 14px;

                h4 {
                    margin: 5px 0;
                    font-size: 14px;
                    font-weight: bold;
                }

                p {
                    font-weight: initial;
                    overflow: hidden;
                    height: 62px;
                    max-height: 62px;
                }
            }

            &::before {
                content: "";
                position: absolute;
                border-width: 6px;
                border-style: solid;
                transform: rotate(45deg);
                top: -5px;
                left: 12px;
                border-color: transparent transparent transparent #e8e8e8;
            }
            &::after {
                content: "";
                position: absolute;
                border-width: 6px;
                border-style: solid;
                transform: rotate(45deg);
                bottom: 3px;
                right: 5px;
                border-color: transparent #e8e8e8 transparent transparent;
            }
        }
    }

    @media (max-width: 500px) {
        display: grid;
        .partner-item {
            width: 100%;
        }
    }
}
</style>